<template>
	<view class="container">
		<!-- 商品图片 -->
			<view class="image">
		<image :src="productDetail.img" mode="aspectFit"></image>
</view>
		<!-- 商品信息 -->
		<view class="product-info">
			<view class="product-name">{{ productDetail.name }}</view>
			<view class="product-description">{{ productDetail.description }}</view>
			<view class="product-prices">
				<text class="product-discount-price"
					v-if="productDetail.discount_price">￥{{ productDetail.discount_price }}</text>
				<text class="product-original-price"
					v-if="productDetail.discount_price">￥{{ productDetail.original_price }}</text>
				<text class="product-original-price2" v-else>￥{{ productDetail.original_price }}</text>
			</view>
			<view class="product-stock">库存: {{ productDetail.stock }}</view>
		</view>

		<!-- 商品导航 -->
		<view class="product-navigation">
			<navigator url="/pages/index/index" class="nav-item" @click="navigateToIndex">
				<image src="/static/icon/shouye.png" class="nav-icon"></image>
				<text class="nav-text">首页</text>
			</navigator>
			<view class="nav-item" @click="openNewsDialog">
				<image src="/static/icon/My.png" class="nav-icon"></image>
				<text class="nav-text">资讯</text>
			</view>
			<navigator url="/pages/cart/cart" class="nav-item" @click="navigateToCart">
				<image src="/static/icon/gouwuche.png" class="nav-icon"></image>
				<text class="nav-text">购物车</text>
			</navigator>
			<view class="action-buttons">
				<view v-if="productDetail.state === '有库存'" @click="openDialog" class="add-to-cart-button">加入购物车</view>
				<view v-else @click="openDialog2" class="add-to-cart-button2">加入购物车</view>
				<view v-if="productDetail.state === '有库存'" @click="openDialog" class="buy-now-button">立即购买</view>
				<view v-else @click="openDialog2" class="buy-now-button2">立即购买</view>
			</view>
		</view>

		<!-- 对话框背景遮罩 -->
		<view v-if="isDialogVisible" class="mask" @click="closeDialog"></view>

		<!-- 对话框 -->
		<view v-if="isDialogVisible" class="dialog">
			<view class="dialog-content">
				<view class="product-info">
					<image :src="cartDialogProduct.img" class="product-image" />
					<view class="product-details">
						<text class="product-name">{{ cartDialogProduct.name }}</text>
						<view class="product-prices">
							<text v-if="cartDialogProduct.discount_price"
								class="product-discount-price">￥{{ cartDialogProduct.discount_price }}</text>
							<text class="product-original-price"
								v-if="cartDialogProduct.discount_price">￥{{ cartDialogProduct.original_price }}</text>
							<text v-else class="product-original-price2">￥{{ cartDialogProduct.original_price }}</text>
						</view>
					</view>
				</view>
				<view class="quantity-control">
					<button @click="decreaseQuantity">-</button>
					<view>{{ cartDialogProduct.quantity }}</view>
					<button @click="increaseQuantity">+</button>
				</view>
				<button v-if="isDialogVisible && !cart" @click="addProductToCart" class="add-to-cart-button3">加入购物车</button>
				<button v-else @click="confirmPurchase" class="buy-now-button3">立即购买</button>
			</view>
		</view>

		<!-- 资讯弹窗 -->
		<view v-if="newsDialogVisible" class="news-dialog">
			<view class="news-dialog-content">
				<text>这是弹窗</text>
				<button @click="closeNewsDialog">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productDetail: {},
				productId: '',
				isDialogVisible: false,
				cartDialogProduct: {
					quantity: 1
				},
				cart: true,
				newsDialogVisible: false,
			};
		},
		onLoad(options) {
			// 页面加载时获取传递过来的商品ID
			this.productId = options.id;
			this.fetchProductDetail();
		},
		methods: {
			fetchProductDetail() {
				// 调用后端接口获取商品详情
				uni.request({
					url: `http://localhost:8887/Product/selectid?id=${this.productId}`,
					method: 'GET',
					success: (res) => {
						if (res.data.code === 200 && res.data.success) {
							this.productDetail = res.data.data;
							// 修复图片地址问题
							this.productDetail.img = res.data.data.img.replace(/&#34;/, '');
						} else {
							uni.showToast({
								title: '获取商品详情失败',
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络请求失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			openDialog() {
				if (this.productDetail.state === "无库存") {
					uni.showToast({
						title: '该商品无库存',
						icon: 'none',
						duration: 2000
					});
				} else {
					this.isDialogVisible = true;
					this.cart = true;
					this.cartDialogProduct = {
						...this.productDetail,
						quantity: 1
					};
				}
			},
			openDialog2() {
				if (this.productDetail.state === "无库存") {
					uni.showToast({
						title: '该商品无库存',
						icon: 'none',
						duration: 2000
					});
				} else {
					this.isDialogVisible = true;
					this.cart = false;
					this.cartDialogProduct = {
						...this.productDetail,
						quantity: 1
					};
				}
			},
			closeDialog() {
				this.isDialogVisible = false;
			},
			navigateToIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			navigateToCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				});
			},
			openNewsDialog() {
				// this.newsDialogVisible = true;
				  uni.makePhoneCall({
				    phoneNumber: '15359369660' // 仅为示例
				  });
			},
			closeNewsDialog() {
				this.newsDialogVisible = false;
			},
			addProductToCart() {
				if (this.cartDialogProduct.state === "无库存") {
					uni.showToast({
						title: '该商品无库存',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				const token = uni.getStorageSync('Authorization');
				const data = {
					product_id: this.cartDialogProduct.id,
					quantity: this.cartDialogProduct.quantity,
				};

				const header = {
					'Content-Type': 'application/json',
					'Authorization': token,
				};

				uni.request({
					url: 'http://localhost:8887/Shoppingcart/add',
					method: 'POST',
					header: header,
					data: data,
					success: (res) => {
						if (res.data.code === 200) {
							this.isDialogVisible = false;
							uni.showToast({
								title: res.data.message,
								icon: 'success',
								duration: 2000
							});
						} else if (res.data.status === 'unauthorized') {
							uni.navigateTo({
								url: '/pages/login/login',
							});
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '网络请求失败，请稍后再试',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
confirmPurchase() {
  // 调用立即购买的API，并处理返回结果
  uni.showToast({
    title: '立即购买成功',
    icon: 'success',
    duration: 2000
  });
  console.log('Passing data to settlement page:', this.cartDialogProduct);

  const productData = JSON.parse(JSON.stringify(this.cartDialogProduct));

  uni.setStorageSync('cachedProductData', productData);
  uni.navigateTo({
    url: '/pages/settlement2/settlement2?product=' + encodeURIComponent(JSON.stringify(productData)),
  });
},
			increaseQuantity() {
				this.cartDialogProduct.quantity++;
			},
			decreaseQuantity() {
				if (this.cartDialogProduct.quantity > 1) {
					this.cartDialogProduct.quantity--;
				}
			}
		}
	};
</script>

<style>
	.container {
		padding: 10px;
	}

	.image {
		width: 100%;
		height: 250px;
		border-radius: 10px;
		margin-bottom: 10px;
	}
	.image>image{
		width: 100%;
		height: 250px;
	}

	.product-info {
		margin-bottom: 20px;
	}

	.product-name {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.product-description {
		font-size: 14px;
		color: #666;
		margin-bottom: 10px;
	}

	.product-prices {
		font-size: 16px;
		color: #333;
		margin-bottom: 10px;
	}

	.product-original-price {
		text-decoration: line-through;
		font-size: 14px;
	}

	.product-original-price2 {
		color: red;
		font-size: 20px;
		font-weight: bold;
	}

	.product-discount-price {
		color: red;
		font-weight: bold;
		font-size: 20px;
	}

	.product-stock {
		font-size: 14px;
		color: #666;
	}

	.product-navigation {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
		background-color: #fff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		z-index: 1000;
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #333;
		flex: 1;
	}

	.nav-icon {
		width: 24px;
		height: 24px;
		margin-bottom: 5px;
	}

	.nav-text {
		font-size: 12px;
	}

	.action-buttons {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60%;
		margin-right: 10px;
		/* 增加与右边的距离 */
	}

	.add-to-cart-button,
	.buy-now-button {
		background-color: #e4393c;
		color: white;
		padding: 9px 10px;
		text-align: center;
		margin: 0;
		flex: 1;
	}

	.add-to-cart-button {
		background-color: #e4393c;
		border-radius: 11px 0 0 11px;
	}

	.buy-now-button {
		background-color: #d0323a;
		border-radius: 0 11px 11px 0;
	}

	.add-to-cart-button2,
	.buy-now-button2 {
		background-color: #BABABA;
		color: white;
		padding: 9px 10px;
		text-align: center;
		margin: 0;
		flex: 1;
	}

	.add-to-cart-button2 {
		border-radius: 11px 0 0 11px;
	}

	.buy-now-button2 {
		border-radius: 0 11px 11px 0;
	}

	.add-to-cart-button3,
	.buy-now-button3 {
		background-color: #e4393c;
		color: white;
		padding: 9px 10px;
		text-align: center;
		margin: 0;
		flex: 1;
	}

	.add-to-cart-button3 {
		border-radius: 11px;
	}

	.buy-now-button3 {
		border-radius: 11px;
	}

	.out-of-stock {
		background-color: #999;
		color: white;
		padding: 10px;
		text-align: center;
		border-radius: 5px;
		margin: 0 10px;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;
	}

	.dialog {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		z-index: 1001;
	}

	.dialog-content {
		padding: 20px;
	}

	.quantity-control {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.quantity-control button {
		margin: 0 10px;
	}

	.news-dialog {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1002;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.news-dialog-content {
		background-color: #fff;
		padding: 20px;
		border-radius: 10px;
	}
</style>